<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>静态首页面</title>
    <link rel="stylesheet" href="lib/reset.css">
    <link rel="stylesheet" href="lib/index.css">
    <link rel="stylesheet" href="lib/download/font_2136775_qhlyqf2gm9/iconfont.css">
</head>

<body>
    <div class="header">
        <img src="img/logo.png" alt="">
        <ul class="nav">
            <li>新品</li>
            <li id="girl">女士</li>
            <li>男士</li>
            <li>礼物</li>
            <li>线上专享</li>
        </ul>
        <ul class="header-list">
            <li>
                <span class="iconfont icon-kefu
                "></span>
            </li>
            <li>
                <span class="iconfont icon-sousuo
                "></span>
            </li>
            <li>
                <span class="iconfont icon-wo
                " id="send"></span>
            </li>
            <li>
                <span class="iconfont icon-baobao
                "></span>
            </li>
        </ul>
    </div>
    <div id="box1">
        <div class="box1-content">
            <ul class="first">
                <li>全新女士商品</li>
                <li>浏览所有全新女士商品</li>
                <li>手袋</li>
                <li>钱包</li>
                <li>服饰</li>
                <li>鞋履</li>
                <li>配饰</li>
            </ul>
            <ul class="two">
                <li>全新男士商品</li>
                <li>浏览所有全新男士商品</li>
                <li>手袋</li>
                <li>服饰</li>
                <li>鞋履</li>
                <li>配饰</li>
            </ul>
            <ul class="three">
                <li>女士潮流趋势</li>
                <li>秋季精选</li>
                <li>经典风格</li>
                <li>白色甄选</li>
                <li>热卖甄选</li>
            </ul>
            <ul class="four">
                <li>男士潮流趋势</li>
                <li>Pacer系列</li>
                <li>商务精选</li>
                <li>型男必备</li>
                <li>旅行商品</li>
            </ul>
            <ul class="five">
                <li>特色专题</li>
                <li>COACH X JENNIFER LOPEZ</li>
                <li>COACH X JEAN-MICHEL BASQUIAT</li>
                <li>Coach Originals</li>
                <li>Dream It Real</li>
                <li>Horse and Carriage</li>
                <li>十年历程，时刻铭记</li>
            </ul>
            <img src="img/1.png" alt="">
        </div>
    </div>
    <div id="box2">
        <div class="box2-content">
            <ul>
                <li>手袋</li>
                <li>浏览所有手袋</li>
                <li>单肩包</li>
                <li>手提包</li>
                <li>斜挎包</li>
                <li>大手袋</li>
                <li>手拿包</li>
                <li>背包</li>
            </ul>
            <ul>
                <li>钱包&手腕包</li>
                <li>浏览所有钱包&手腕包</li>
                <li>大号钱包</li>
                <li>中号钱包</li>
                <li>小号钱包</li>
                <li>手腕包</li>
            </ul>
            <ul>
                <li>服饰</li>
                <li>浏览所有服饰</li>
                <li>上衣</li>
                <li>外套</li>
                <li>连衣裙</li>
                <li>半身裙和裤子</li>
                <li>帽子、手套和围巾</li>
            </ul>
            <ul>
                <li>鞋履</li>
                <li>浏览所有鞋履</li>
                <li>CitySole</li>
                <li>平底鞋</li>
                <li>运动鞋</li>
                <li>靴子</li>
            </ul>
            <ul>
                <li>配饰</li>
                <li>浏览所有配饰</li>
                <li>钥匙链&挂件</li>
                <li>太阳眼镜</li>
                <li>时尚首饰</li>
                <li>护理产品</li>
                <li>手表</li>
                <li>皮带</li>
                <li>香水</li>
            </ul>
            <ul>
                <li>产品系列</li>
                <li>Alie系列</li>
                <li>Charlie系列</li>
                <li>Hutton系列</li>
                <li>Rambler系列</li>
                <li>Riley系列</li>
                <li>Tabby系列</li>
                <li>Tote系列</li>
                <li>Willis系列</li>
            </ul>
        </div>
    </div>
    <div id="box3">
        <div class="box3-content">
            <ul>
                <li>手袋</li>
                <li>浏览所有手袋</li>
                <li>公事包</li>
                <li>腰包</li>
                <li>背包</li>
                <li>信使包</li>
            </ul>
            <ul>
                <li>钱包和卡袋</li>
                <li>浏览所有钱包和卡袋</li>
                <li>大号钱包</li>
                <li>中号钱包</li>
                <li>卡袋</li>
            </ul>
            <ul>
                <li>服饰</li>
                <li>浏览所有服饰</li>
                <li>外套</li>
                <li>男士成衣</li>
            </ul>
            <ul>
                <li>鞋履</li>
                <li>浏览所有鞋履</li>
                <li>CitySole</li>
                <li>休闲鞋</li>
                <li>运动鞋</li>
            </ul>
            <ul>
                <li>配饰</li>
                <li>浏览所有配饰</li>
                <li>其他配件</li>
                <li>皮带</li>
                <li>手表</li>
                <li>香水</li>
                <li>太阳眼镜</li>
            </ul>
        </div>
    </div>
    <div id="box4">
        <div class="box4-content">
            <ul>
                <li>女士礼物</li>
                <li>浏览所有女士礼物</li>
                <li>3500元以下</li>
                <li>3500元-5000元</li>
                <li>奢华礼物</li>
                <li>热卖商品</li>
            </ul>
            <ul>
                <li>男士礼物</li>
                <li>浏览所有男士礼物</li>
                <li>3500元以下</li>
                <li>3500元-5000元</li>
                <li>奢华礼物</li>
                <li>热卖商品</li>
            </ul>
            <img src="img/2.png" alt="">
            <img src="img/3.png" alt="">
        </div>
    </div>
    <div id="box5">
        <div class="box5-content">
            <div class="txt">
                <span>手袋</span>
                <span>钱包</span>
            </div>
            <img src="img/4.png" alt="">
        </div>
    </div>
    <div class="key">
        <div class="key-content">
            <img src="img/5.png" alt=""><br>
            <div class="time">
                <span id="first">12</span>
                <span>:</span>
                <span id="second">23</span>
                <span>:</span>
                <span id="last">25</span>
            </div>
            <div class="title">
                <span>时</span>
                <span>分</span>
                <span>秒</span>
            </div>
            <p>畅销星品低至5折，11.11 0点开抢</p>
            <p>点击订阅</p>
        </div>
    </div>
    <div class="series">
        <div class="series-content">
            <h2>全新Tabby系列</h2>
            <p>人见人爱的Tabby手袋融合串珠饰边和经典标志，传统设计尽显新风格。</p>
            <span>选购新款手袋</span>
            <span>选购TABBY系列</span>
        </div>
    </div>
    <div class="bg"></div>
    <div class="eng">
        <p>Jennifer Lopez & Family</p>
        <p>Los Angeles, Califorina</p>
    </div>
    <div class="method">
        <div class="method-content">
            <h2>更多Tabby携带方式</h2>
            <ul>
                <li>
                    <img src="img/bao1.jpg" alt="">
                    <p>经典标志帆布珠链TABB...</p>
                </li>
                <li>
                    <img src="img/bao2.jpg" alt="">
                    <p>珠链TABBY 26号单肩...</p>
                </li>
                <li>
                    <img src="img/bao3.jpg" alt="">
                    <p>拼色经典标志帆布TABB...</p>
                </li>
                <li>
                    <img src="img/bao4.jpg" alt="">
                    <p>抛光鹅卵石纹缓和皮革T...</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="package">
        <div class="package-content">
            <img src="img/package.jpg" alt="">
            <div class="package-title">
                <h2>百搭魅力手袋。</h2>
                <p>选购TABBY系列</p>
            </div>
        </div>
    </div>
    <div class="hot">
        <div class="hot-content">
            <h2>了解当下热卖商品</h2>
            <span>选购女士热卖</span>
            <span>选购男士热卖</span>
            <ul>
                <li>
                    <img src="img/package1.jpg" alt="">
                    <p>选购女士手袋</p>
                </li>
                <li>
                    <img src="img/package2.jpg" alt="">
                    <p>选购女士服饰</p>
                </li>
                <li>
                    <img src="img/package3.jpg" alt="">
                    <p>选购男士手袋</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="read">
        <div class="read-content">
            <h2>更多Coach故事</h2>
            <div class="read-title">
                <p>兼具高低帮鞋款特色的CitySole中帮鞋。</p>
                <p>选购女士CITYSOLE</p>
                <p>选购男士CITYSOLE</p>
            </div>
            <div class="read-right">
                <img src="img/read.jpg" alt="">
            </div>
        </div>
    </div>
    <div class="coach">
        <div class="coach-content">
            <div class="coach-left">
                <img src="img/coach.jpg" alt="">
            </div>
            <div class="coach-title">
                <img src="img/coach1.jpg" alt="">
                <p>切勿错过Coach与纽约开拓性艺术家的合作单品。</p>
                <p>选购女士系列</p>
                <p>选购男士系列</p>
            </div>
        </div>
    </div>
    <div class="selShop">
        <div class="selShop-content">
            <div class="selShop-title">
                <p>全新秋季色调的经典标志。</p>
                <p>选购ALIE手袋</p>
            </div>
            <div class="selShop-right">
                <img src="img/selShop.jpg" alt="">
            </div>
        </div>
    </div>
    <h4>Coach的1941号规则：家，就是爱的归属。</h4>
    <div class="server">
        <div class="server-content">
            <h2>COACH品质服务</h2>
            <dl>
                <dt><img src="img/s1.png" alt=""></dt>
                <dd>免费配送</dd>
                <dd>甄选顺丰速运</dd>
                <dd>限中国大陆地区</dd>
                <dd>了解详情</dd>
            </dl>
            <dl>
                <dt><img src="img/s2.png" alt=""></dt>
                <dd>免费配送</dd>
                <dd>甄选顺丰速运</dd>
                <dd>限中国大陆地区</dd>
                <dd>了解详情</dd>
            </dl>
            <dl>
                <dt><img src="img/s3.png" alt=""></dt>
                <dd>免费配送</dd>
                <dd>甄选顺丰速运</dd>
                <dd>限中国大陆地区</dd>
                <dd>了解详情</dd>
            </dl>
            <dl>
                <dt><img src="img/s4.png" alt=""></dt>
                <dd>免费配送</dd>
                <dd>甄选顺丰速运</dd>
                <dd>限中国大陆地区</dd>
                <dd>了解详情</dd>
            </dl>
            <dl>
                <dt><img src="img/s5.png" alt=""></dt>
                <dd>免费配送</dd>
                <dd>甄选顺丰速运</dd>
                <dd>限中国大陆地区</dd>
                <dd>了解详情</dd>
            </dl>
            <dl>
                <dt><img src="img/s6.png" alt=""></dt>
                <dd>免费配送</dd>
                <dd>甄选顺丰速运</dd>
                <dd>限中国大陆地区</dd>
                <dd>了解详情</dd>
            </dl>
            <dl>
                <dt><img src="img/s7.png" alt=""></dt>
                <dd>免费配送</dd>
                <dd>甄选顺丰速运</dd>
                <dd>限中国大陆地区</dd>
                <dd>了解详情</dd>
            </dl>
            <dl>
                <dt><img src="img/s8.png" alt=""></dt>
                <dd>免费配送</dd>
                <dd>甄选顺丰速运</dd>
                <dd>限中国大陆地区</dd>
                <dd>了解详情</dd>
            </dl>
        </div>
    </div>
    <div class="footer">
        <div class="footer-content">
            <div class="footer-top">
                <ul>
                    <li>网站与精品店</li>
                    <li>查找精品店</li>
                    <li>网站导航</li>
                    <li>使用条款</li>
                    <li>安全与隐私</li>
                </ul>
                <ul>
                    <li>客户服务</li>
                    <li>关于订单</li>
                    <li>关于产品</li>
                    <li>VIP会籍招募条件</li>
                    <li>联系我门</li>
                </ul>
                <ul>
                    <li>关于COACH</li>
                    <li>公司信息</li>
                    <li>TAPESTRY</li>
                    <li>职业招聘</li>
                </ul>
                <ul>
                    <li>关注COACH</li>
                    <li>官方微博</li>
                    <li>官方微信</li>
                    <img src="img/erweima.png" alt="">
                    <li>关注COACH官方微信</li>
                    <li>获取电子会员卡及微信</li>
                    <li>专属礼遇</li>
                </ul>
                <ul>
                    <li>获取COACH新讯</li>
                    <li>
                        <input type="text" placeholder="电子邮箱*">
                    </li>
                    <li>
                        <input type="text" placeholder="确认电子邮箱*">
                    </li>
                    <li>您已经注册并同意接受COACH邮件，您可以随时取消订阅。</li>
                    <li>阅读<u>安全与隐私政策</u>或<u>联系我们</u>获取更多信息。</li>
                    <li>
                        加入我们
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; THE ESTATE OF RICHARD BERNSTEIN</p>
            <p>&copy; 2020 COACH IP HOLDINGS LLC. COACH, COACH SIGNATURE C DESIGN, COACH & TAG DESIGN, COACH HORSE & CARRIAGE DESIGN ARE REGISTERED TRADEMARKS OF COACH IP HOLDINGS LLC.</p>
            <span>泸ICP备0906012号-1,</span>
            <img src="img/wron1.png" alt="">
            <span>上海工商</span><br>
            <img src="img/wron2.png" alt="">
            <span>泸公网备31010602000942</span>
        </div>
    </div>
    <div class="fix">
        <span class="iconfont icon-kefu"></span>
    </div>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/common.js"></script>
    <script>
        //登录验证
        let userInfo = sessionStorage.getItem("userInfo") || document.cookie.replace("userInfo=", "");
        if (!userInfo) {
            location.href = `${address}/login.html`;
        }

        let li1 = $(".nav li").eq(0);
        let li2 = $(".nav li").eq(1);
        let li3 = $(".nav li").eq(2);
        let li4 = $(".nav li").eq(3);
        let li5 = $(".nav li").eq(4);
        li1.mouseenter(function() {
            $("#box1").show();
            $("#box2").hide();
            $("#box3").hide();
            $("#box4").hide();
            $("#box5").hide();
        })
        $("#box1").mouseleave(function() {
            $("#box1").hide();
        })
        li2.mouseenter(function() {
            $("#box2").show();
            $("#box1").hide();
            $("#box3").hide();
            $("#box4").hide();
            $("#box5").hide();
        })
        $("#box2").mouseleave(function() {
            $("#box2").hide();
        })
        li3.mouseenter(function() {
            $("#box3").show();
            $("#box1").hide();
            $("#box2").hide();
            $("#box4").hide();
            $("#box5").hide();
        })
        $("#box3").mouseleave(function() {
            $("#box3").hide();
        })
        li4.mouseenter(function() {
            $("#box4").show();
            $("#box1").hide();
            $("#box2").hide();
            $("#box3").hide();
            $("#box5").hide();
        })
        $("#box4").mouseleave(function() {
            $("#box4").hide();
        })
        li5.mouseenter(function() {
            $("#box5").show();
            $("#box1").hide();
            $("#box2").hide();
            $("#box3").hide();
            $("#box4").hide();
        })
        $("#box5").mouseleave(function() {
            $("#box5").hide();
        })

        //倒计时
        function daojishi(targetTime) {
            var now = new Date();
            var target = new Date(targetTime);

            var time = Math.floor((target.getTime() - now.getTime()) / 1000);
            var hours = parseInt(time / 3600);
            //var minutes = Math.floor((time - hours * 3600) / 60);
            var minutes = Math.floor(time % 3600 / 60);
            var seconds = time % 60;
            if (hours < 10) {
                hours = "0" + hours;
            }
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            return hours + ":" + minutes + ":" + seconds;
        }
        var arr = (daojishi("2020-11-11 24:00:00")).split(":");
        first.innerHTML = arr[0];
        second.innerHTML = arr[1];
        last.innerHTML = arr[2];
        setInterval(function() {
            var arr = daojishi("2020-11-11 24:00:00").split(":");
            first.innerHTML = arr[0];
            second.innerHTML = arr[1];
            last.innerHTML = arr[2];
        }, 1000)


        //点击登录事件
        $("#send").click(function() {
            location.href = `${address}/login.html`;
        })

        //跳转商品列表页
        $("#girl").click(function() {
            location.href = `${address}/list.html`;
        })
    </script>

</body>

</html>